<template>
<div class="mindmap-container">
    <div class="node" :class="{ expanded: item.expanded }">
        <div class="node-content">
            <div class="node-circle" :class="{
                'green': item.nodeState == 1,
                'red': item.nodeState == 0,
                'orange': item.nodeState == 2
            }">
                {{ item.percent }}%
            </div>
            <div class="node-name">
                <div v-if="!isEditing" @click="startEdit" class="pointer">{{ item.nodeName }}</div>
                <el-input v-else v-model="editedName" @blur="finishEdit" @keyup.enter="finishEdit" ref="editInput" style="width: 100%;" />
            </div>
            <div class="node-operations">
                <a @click="addBrotherItem(index, item)" v-if="item.projectId !== 0">同级 +</a>
                <span v-if="item.projectId !== 0">|</span>
                <a @click="addChildItem(index, item)">子级 +</a>
                <span>|</span>
                <a @click="deleteItem(index, item)">删除</a>
                <span>|</span>
                <a @click="testIntem(index, item)">编辑</a>
                <span v-if="item.children && item.children.length">|</span>
                <a v-if="item.children && item.children.length" @click="expandCollapse(index, item)">
                    {{ item.expanded ? '收起' : '展开' }}
                </a>
            </div>
        </div>
        <div class="node-info">
            <p>开始时间: {{ formatDateTime(item.nodeStartTime) }}</p>
            <p>结束时间: {{ formatDateTime(item.nodeEndTime) }}</p>
        </div>
        <div v-if="item.expanded && item.children && item.children.length" class="children">
            <RecursiveItem v-for="(child, childIndex) in item.children" :key="childIndex" :item="child" :index="childIndex"
                @editItem="editItem" @addBrotherItem="addBrotherItem" @addChildItem="addChildItem" @deleteItem="deleteItem"
                @testIntem="testIntem" @seeNodeDetail="seeNodeDetail" @expandCollapse="expandCollapse" />
        </div>
    </div>
</div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, onUnmounted, nextTick } from 'vue';
import RecursiveItem from './RecursiveItem.vue';
import { formatDateTime } from "@/utils/format";
// import { ElMessage } from 'element-plus';

const props = defineProps({
    item: {
        type: Object,
        required: true
    },
    index: {
        type: Number,
        required: true
    },
});

const emit = defineEmits(['testIntem', 'editItem', 'addBrotherItem', 'addChildItem', 'deleteItem', 'seeNodeDetail', 'expandCollapse']);

const isEditing = ref(false);
const editedName = ref(props.item.nodeName);
const editInput = ref(null);

const startEdit = () => {
    isEditing.value = true;
    nextTick(() => {
        if (isEditing.value && editInput.value) {
            editInput.value.focus();
        }
    });
};

const finishEdit = () => {
    isEditing.value = false;
    if (!editedName.value) {
        // editedName.value = props.item.nodeName;
        return //ElMessage.error("请输入节点名称");
    }
    if (editedName.value !== props.item.nodeName) {
        emit('editItem', props.index, { ...props.item, nodeName: editedName.value });
    }
};

const testIntem = (index, item) => {
    emit('testIntem', index, item);
};

const editItem = (index, item) => {
    emit('editItem', index, item);
};

const addBrotherItem = (index, item) => {
    emit('addBrotherItem', index, item);
};

const addChildItem = (index, item) => {
    emit('addChildItem', index, item);
};

const deleteItem = (index, item) => {
    emit('deleteItem', index, item);
};

const seeNodeDetail = (index, item) => {
    emit('seeNodeDetail', index, item)
};

const expandCollapse = (index, item) => {
    emit('expandCollapse', index, item);
};

onMounted(() => {

});

onUnmounted(() => {

});

</script>

<style lang="scss" scoped>
.mindmap-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.node {
    position: relative;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    width: fit-content;
    transition: all 0.3s ease;
}

.node-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.node-circle {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background-color: #ddd;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.green {
    background-color: #a5dc86;
}

.red {
    background-color: #f86c6b;
}

.orange {
    background-color: #ff9800;
}

.node-name .pointer {
    cursor: pointer;
}

.node-operations {
    margin-top: 10px;
}

.node-operations a {
    margin: 0 5px;
    cursor: pointer;
    text-decoration: none;
    color: #007bff;
}

.node-operations a:hover {
    text-decoration: underline;
}

.node-info {
    margin-top: 10px;
    font-size: 0.9em;
    color: #666;
}

.children {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

.children .node {
    margin-left: 20px; /* 缩进以表示层次结构 */
}
</style>
